<!--
 * @Author: zw 775925302@qq.com
 * @Date: 2023-03-04 20:47:48
 * @LastEditors: zw 775925302@qq.com
 * @LastEditTime: 2023-03-18 21:20:56
 * @Description: 
-->
<template>
    <ZwTemplateListEditPage :schema="gridOptions" ref="refListPage" />
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { PageListSchema } from '@/components-lowcode/types/lowcode'

const refListPage = ref();

const gridOptions = reactive<PageListSchema>({
    searchConfig: {
        data: {
            user: '',
            region: '',
        },
        attrs: {
            labelPosition: "right",
            labelWidth: "150px",
        },
        widgets: [
            {
                formItem: {
                    labelWidth: "150px",
                    rules: [
                        {
                            required: true,
                            message: 'Please input userName',
                            trigger: 'blur',
                        },
                    ]
                },
                label: "用户名",
                key: "user",
                component: "Input",
                hidden: false,
                attrs: {
                    placeholder: "请输入用户名",
                    clearable: true,
                },
                defaultValue: "info",//默认值
            },
            {
                formItem: {
                    labelWidth: "150px",
                },
                label: "地区",
                key: "region",
                component: "Select",
                hidden: false,
                attrs: {
                    placeholder: "请输入用户名",
                    clearable: true,
                },
                options: [
                    {
                        value: 'Option1',
                        label: 'Option1',
                    },
                    {
                        value: 'Option2',
                        label: 'Option2',
                    },
                    {
                        value: 'Option3',
                        label: 'Option3',
                    },
                ],
                optionsAlias: {
                    labelField: "label",
                    valueField: "value"
                },
                isOptionGroup: false,
            }
        ]
    },
    tableConfig: {
        border: true,
        columnConfig: {
            resizable: true
        },
        rowConfig: {
            keyField: 'id',
            isHover: true
        },
        checkboxConfig: {
            highlight: true,
            showHeader: true,
        },
        columns: [
            { type: 'checkbox', title: '', width: 60, align: "center" },
            { field: 'columnName', title: '字段列名',editRender: { name: 'input', attrs: { placeholder: '请输入名称' } }},
            { field: 'nickname', title: 'Nickname' ,editRender: { name: 'input', attrs: { placeholder: '请输入名称' } }},
            { field: 'email', title: 'email' ,editRender: { name: 'input', attrs: { placeholder: '请输入名称' } }},
            { field: 'mobile', title: 'mobile', editRender: { name: 'input', attrs: { placeholder: '请输入名称' } }},
        ],
        buttons: [
            {
                title: '新增', icon: 'ep:zoom-in', type: "primary",
                event: () => { refListPage.value.onRunGridCode('insert_actived') }
            },
            {
                title: '删除', icon: 'ep:delete', type: "danger",
                event: () => { refListPage.value.onRunGridCode('delete') },
            },
            {
                title: '保存', icon: 'fa-solid:save',
                event: () => { refListPage.value.onRunGridCode('save') },
            }
        ],
        toolbarConfig: {
            slots: {
                buttons: "slotButtons"
            },
            refresh: true,
            import: true,
            export: true,
            zoom: true,
            custom: true
        },
        proxyConfig: {
            props: {
                result: 'list', // 配置响应结果列表字段
                total: 'total' // 配置响应结果总页数字段
            },
            ajax: {

            }
        },
        editConfig: {
            trigger: 'click',
            mode: 'row',
            showStatus: true
        }
    },

    proxyConfig: {
        query: {
            method: "get",
            url: "/system/user/page",
            params: {
                default: [] //{key,value}
            }
        },
        delete: {
            method: "delete",
            url: "/system/user/delete",
            params: {
            }
        },
        detail: {
            method: "get",
            url: "/system/user/get",
            params: {

            }
        },
        create: {
            method: "post",
            url: "system/user/create",
            params: {}
        },
        update: {
            method: "put",
            url: "/system/user/update",
            params: {

            }
        },
        import: {
            method: "post",
            url: "/api/pub/import",
        }
    },
})



</script>

<style scoped>
.cRoot {
    display: flex;
    flex-direction: column;
}
</style>